<template>
	<view>
		
		<view class="grace-padding">
		 
		  <view class="grace-h4 grace-blod">[{{databaseCnData}}] {{titleData}}</view>
		   
		  <view class="grace-text" style="margin-top:5upx;">
			<text>
				{{summaryData}}
			</text>
		  </view>
		  
		  <view class="detail-text">
		  	<block v-for="(item,index) in entityData" :key="index" >
				<text class="detail-field">
					{{item.name}}：
				</text>
				<text class="field-text">
					{{item.value}}
				</text>
				<view>
				</view>
			</block>
			
		  </view>
		  
		  <view class="grace-text" style="margin-top:12upx;">
		  	<!-- <image :src="obj.cover" mode="widthFix"></image> -->
		  	<rich-text :nodes="textData"></rich-text>
		  </view>
			 
		</view>
		
	</view>
	
</template>

<script>
import {
	mapState,
	mapMutations
} from 'vuex';
var _self;

import graceLoading from "../../../graceUI/components/graceLoading.vue"
export default {
	computed: {
		...mapState(['userInfo', 'hasLogin', 'loginProvider', 'openid', 'databaseInfo'])
	},	
	data() {
		return {
			tabCurrentIndex: 0,
			tabHeight : 150,
			tabs: [],
			newsAll: [],
			entityData:[],
			id: "",
			type: "",
			title: "",
			author: "",
			cover: "",
			create_time_str: "",
			showFields:[],
			propertyData:[],
			titleData:"",
			databaseCnData:"",
			pdfURL: "",
			summaryData:"",
			textData:"",
			dataShow: false
		}
	},
	onLoad:function(e){
		_self = this;
		let obj = JSON.parse(decodeURIComponent(e.obj));
		this.id = obj.id;
		this.type = obj.type;
		this.title = obj.title;
		this.author = obj.author;
		this.create_time_str = obj.create_time_str;
		this.cover = obj.cover;
		this.getDataProperty();
		
	},
	onReady: function () {
		//获取屏幕高度及比例
		var winInfo = uni.getSystemInfo({
			success: function (res) {
				var windowHeight = res.windowHeight;
				//获取头部标题高度
				var dom = uni.createSelectorQuery().select('#grace-tab-title')
				dom.fields({size: true}, res2 => {
					if(!res2){return ;}
					//计算得出滚动区域的高度
					_self.tabHeight = windowHeight - res2.height;
				}).exec();
			}
		});
	},
	methods:{
		...mapMutations(['login', 'logout', 'setOpenid', 'setProvider']),
		goWebview()  {
			uni.navigateTo({
				url: "/pages/general/webview/webview",
			})
		},
		
		getDetail()  {
			var data = {
				id: this.id,
				showFields: this.showFields + "database_cn",
				username: this.userInfo.username
			};
			uni.request({
				url: this.serverUrl + 'search-api/find',
				header: {
					"content-type": "application/x-www-form-urlencoded; charset=UTF-8"
				},
				data: data,
				method: "POST",
				success: (r) => {
					//console.log(r);
					if (r.data.code == '000000') {
						console.log(r.data.data);
						
						let tempData = r.data.data.data[0];
						
						this.titleData = tempData.title;
						this.summaryData = tempData.summary;
						this.databaseCnData = tempData.database_cn;
						this.pdfURL = tempData.pdf;
						this.textData = tempData.content[0].replace(/h2/g, "view").replace(/\\/g, "").replace(/<img/g,
									"<img style=\"width:100%; height: auto;\"");
						
						//循环属性二次封装
						for(var key in tempData ){
							if(key!='title' && key!='summary' && key!='database_cn' 
								&& key!='type' && key!='database_cn' && key!='pdf' && key!='content' && key!='cover') {
								// console.log(key);
								// console.log(tempData[key]);
								//判断是否有值，只展示有值的字段
								if(null!=tempData[key] && tempData[key].length>0) {
									let fieldLabel = '';
									for (var i = 0; i < this.propertyData.length; i++) {
										if(key==this.propertyData[i].key) {
											fieldLabel = this.propertyData[i].value;
										}
									}
									var tmpObj = {
										name: fieldLabel,
										value: tempData[key]
									};
									this.entityData.push(tmpObj);
								}
								//
							}
							
						}
						
					} else {
						uni.showToast({
							title: r.data.message
						});
					}
				},
				fail: (data, code) => {
					console.log('fail' + JSON.stringify(data));
				}
			})
		},
		// 查询字段
		getDataProperty() {
			var data = {
				databaseEn: this.type,
				webDetailShow: "1",
				pageNumber: 1,
				pageSize: 50
			};
			uni.request({
				url: this.serverUrl + 'search-api/getDataProperty',
				header: {
					"content-type": "application/x-www-form-urlencoded; charset=UTF-8"
				},
				data: data,
				method: "POST",
				success: (r) => {
					// console.log(r);
					if(r.data.code=='000000') {
						for (var i = 0; i < r.data.data.length; i++) {
							var tmpObj = {
								key: r.data.data[i].nameEn,
								value: r.data.data[i].nameCn
							};
							this.propertyData.push(tmpObj);
							this.showFields+=r.data.data[i].nameEn+";";
						}
						// console.log(this.propertyData);
						// console.log(this.showFields);
						this.getDetail();
					}else {
						uni.showToast({
							title: r.data.message
						});
					}
				},
				fail: (data, code) => {
					console.log('fail' + JSON.stringify(data));
				}
			})
		},
		
		tabChange: function (e) {
			var index = e.target.id.replace('tabTag-', '');
			this.tabCurrentIndex = index;
			var cateid = e.currentTarget.dataset.cateid;
			this.newsAll = [];
			this.searchResource(cateid);
		}
		
	},
	components:{
		graceLoading
	}
}
</script>

<style>
.grace-tab-current {
	border-bottom:4rpx solid #417dc9 !important;
	color: #417dc9;
}
.grace-tab-title view {
	padding:0 6px;
	margin:0 8px;
	line-height:35px;
}
.grace-news-list-title-main {
	font-size: 30upx;
}
.detail-text {
	background: #F6F7F8;
	width: 100%;
	margin-top: 15upx;
	padding: 15upx;
}
.detail-text > block {
	display:block;
	width:100%;
	padding:5rpx 0;
	margin:5rpx 0;
}

.detail-field {
	width: 150upx;
}
.detail-button {
	margin-top: 35upx;
	display: flex;
	align-items:center;
}

.grace-news-list-title-desc {
	margin-top: 5upx;
}

</style>
